Creating a Subscript and Superscript in HTML 5

A subscript or superscript is a text that appears smaller than a regular text usually, a regular text. Usually, a subscript appears below the baseline of a text; whereas, a superscript appears above the baseline of the text. Subscripting or superscripting text can be useful for displaying chemical formulas or mathematical formulas on a Web page. In HTML you can subscript or superscript the text.

Let’s now learn to create a subscript and superscript:

Creating a Subscript

The <sub> tag is used to create a subscript on a Web page. The text specified between the start tag <sub> and the end tag </sub> is subscripted and displayed in a smaller size below the regular text. Font of the subscript matches with the font of the enclosing text.

Let’s do the following steps to create a subscript:

Open a blank document in Notepad and add the code:


<!DOCTYPE html>
<head>
<title>Creating  Subscript </title>
</head>
<body>
    <p>This is an example of creating subscript. </p>
    <p>This text contains <sub>subscript-puts the character slightly below the line of regular text </sub> on a web page. </p>
    <p>Chemical Example:  C<sub>2</sub>O</p>
</body>
</html>

Save  the document with the name of CreatingSubscript.html. Open the HTML document in browser, it look like this:

This is an example of creating subscript.

This text contains subscript-puts the character slightly below the line of regular text on a web page.

Chemical Example: C2O

Creating a Superscript

The <sup> tag is used to create a superscript on a Web page. The text specified between the start tag <sup> and the end tag </sup> is superscripted and displayed in a smaller size above the regular text. Font of the superscript matches with the font of the enclosing text.

Let’s do the following steps to create a superscript:


<!DOCTYPE html>
<head>
<title>Creating  Superscript </title>
</head>
<body>
    <p>This is an example of creating superscript. </p>
    <p>This text contains <sup>superscript-puts the character slightly below the line of regular text </sup> on a web page. </p>
    <p>Math Example:  95<sup>10</sup></p>
</body>
</html> 

Save  the document with the name of CreatingSuperscript.html. Open the HTML document in browser, it look like this:

This is an example of creating superscript.

This text contains superscript-puts the character slightly below the line of regular text on a web page.

Math Example: 9510